<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>购物系统-首页</title>
    <link th:if="${type} eq 'custom'" th:href="@{/css/plugins/imgUpload.css}" rel="stylesheet">
    <link th:href="@{webjars/bootstrap/5.1.3/css/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{css/ms-common.css}" rel="stylesheet">
    <style>

    </style>
</head>
<body>

<nav th:replace="common/topbar::flag(topbar='userCenter')"></nav>
<nav th:replace="common/ms-toast.html"></nav>\
<div class="container" th:if="session.loginUser != null">
    <div class="d-flex align-items-start mt-5">
        <div class="col-md-2 list-group">
            <a th:class="${type} eq 'base' ? 'list-group-item list-group-item-action active' : 'list-group-item list-group-item-action'"
               href="/user-center.html?type=base">
                基本信息
            </a>

            <a th:class="${type} eq 'head' or ${type} eq 'custom' ? 'list-group-item list-group-item-action active' : 'list-group-item list-group-item-action' "
               href="/user-center.html?type=head">
                修改头像
            </a>
            <a th:class="${type} eq 'password' ? 'list-group-item list-group-item-action active':'list-group-item list-group-item-action'"
               href="/user-center.html?type=password" >
                修改密码
            </a>
            <a th:class="${type} eq 'email' ? 'list-group-item list-group-item-action active' : 'list-group-item list-group-item-action'"
               href="/user-center.html?type=email" >
                修改邮箱
            </a>
        </div>
        <div class="col-md-10" th:if="${type} eq 'base'">
            <div th:replace="user/card/base.html"></div>
        </div>
        <div class="col-md-10" th:if="${type} eq 'head'">
            <div th:replace="user/card/head.html"></div>
        </div>
        <div class="col-md-10" th:if="${type} eq 'custom'">
            <div th:replace="plugins/imgUpload"></div>
        </div>
        <div class="col-md-10" th:if="${type} eq 'password'">
            <div th:replace="user/card/password.html"></div>
        </div>
        <div class="col-md-10" th:if="${type} eq 'email'">
            <div th:replace="user/card/email.html"></div>
        </div>
        <div class="col-md-10" th:if="${type} eq 'reviews'">
            <div th:replace="user/card/reviews.html"></div>
        </div>
        <div class="col-md-10" th:if="${type} eq 'order'">
            <div th:replace="user/card/order.html"></div>
        </div>
    </div>
</div>

<script th:src="@{webjars/jquery/3.3.1/jquery.js}" type="text/javascript"></script>
<script th:src="@{webjars/bootstrap/5.1.3/js/bootstrap.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-config.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-ajax.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-address.js}" type="text/javascript"></script>
<script th:src="@{/js/utils/ms-util-param.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-common.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-btn.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-toast.js}" type="text/javascript"></script>
<script th:src="@{/js/common/ms-topbar.js}" type="text/javascript"></script>
<script th:if="${type} eq 'base'" th:src="@{/js/user/card/ms-base.js}" type="text/javascript"></script>
<script th:if="${type} eq 'head'" th:src="@{/js/user/card/ms-head.js}" type="text/javascript"></script>
<th:block th:if="${type} eq 'custom'">
    <script th:src="@{/js/user/card/ms-custom.js}" type="text/javascript"></script>
    <script th:src="@{/js/plugins/imgUpload/plugin-imageCropper.js}" type="text/javascript"></script>
    <script th:src="@{/js/plugins/imgUpload/plugin-imgUpload.js}" type="text/javascript"></script>
</th:block>

<th:block th:if="${type} eq 'password'">
    <script th:src="@{/js/user/card/ms-password.js}" type="text/javascript"></script>
</th:block>

<th:block th:if="${type} eq 'email'">
    <script th:src="@{/js/user/card/ms-email.js}" type="text/javascript"></script>
</th:block>

<th:block th:if="${type} eq 'order'">
    <script th:src="@{/js/user/card/ms-order.js}" type="text/javascript"></script>
</th:block>
</body>
</html>